<template>
  <div id="xlinkAutoModal">
    <!-- 自定义auto Auto搜索 2018/3/7 11:44 zhangQ -->
    <!--{{optionData.length}},{{ selectValue }}<br>-->
    <Select ref="auto"
      v-model="selectValue"
      :placeholder="placeholder"
      clearable
      :width="width"
      :multiple="multiple"
      :loading="loading">
      <Input v-model="query" placeholder="搜索..." size="small"></Input>
      <Row>
        <i-col span="8" style="border-right: #8D8D8D 1px solid">
          <CheckboxGroup v-model="filterVal">
            <template v-for="item in groupData">
              <Checkbox :label="item[groupField]" :true-value="item[groupField]">{{ item[groupLabel] }}</Checkbox>
              <br>
            </template>
          </CheckboxGroup>
        </i-col>
        <i-col span="16" style="border-left: #8D8D8D 1px solid;overflow: auto;height: 175px">
          <template v-for="item in optionData">
            <Option :value="item[field]" :class="getClass(item[field])">{{ item[label] }}</Option>
          </template>
        </i-col>
      </Row>

    </Select>
  </div>
</template>

<script>
  // import _ from 'lodash'
  import { searchArr } from './searchHelper'

  export default {
    name: 'index',
    data () {
      let query = ''
      let filterVal = []
      let loading = false
      let optionData = []
      let isDropDown = false
      let datas = { loading, optionData, filterVal, query, isDropDown }
      return datas
    },
    // props: ['value', 'placeholder', 'width', 'className', 'List', 'keys', 'label', 'searchKeys'],
    props: {
      value: {},
      multiple: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: ''
      },
      dataList: {
        type: Array,
        default () {
          return []
        }
      },
      field: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: ''
      },
      searchKeys: {
        type: String,
        default: ''
      },
      dropAll: {
        type: Boolean,
        default: false
      },
      groupData: {
        type: Array,
        default () {
          return []
        }
      },
      groupField: {
        type: String,
        default: ''
      },
      groupLabel: {
        type: String,
        default: ''
      },
      groupFilterKeys: {
        type: String,
        default: ''
      }
    },
    computed: {
      selectValue: {
        get () {
          return this.value
        },
        set (val) {
          this.$emit('on-change', val)
          this.$emit('input', val)
        }
      }
    },
    watch: {
      filterVal () {
        this.remoteMethod(this.query)
      },
      isDropDown (val, oldVal) {
        !val && (this.query = '')
      }
    },
    methods: {
      remoteMethod () {
        setTimeout(() => {
          this.optionData = searchArr(this.query, this.dataList, this.searchKeys, this.groupFilterKeys, this.filterVal)
        }, 200)
      },
      getClass (val) {
        return String(this.selectValue) === String(val) ? 'ivu-select-item-selected' : ''
      }
    },
    mounted () {
      if (this.multiple) {
        this.$watch(() => {
          return this.selectValue.length
        }, (newVal, oldVal) => {
          this.remoteMethod()
        })
      }
      this.$watch(() => {
        return this.query
      }, (newVal, oldVal) => {
        this.remoteMethod(newVal)
      })
      this.$watch(() => {
        return this.$refs.auto.dropVisible
      }, (newVal, oldVal) => {
        this.isDropDown = newVal
      })
      if (this.dropAll) {
        this.optionData = this.dataList
      }
    },
    components: {}
  }
</script>

<style>
  #xlinkAutoModal .ivu-select-not-found {
    display: none;
  }
</style>
